import { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { generateWechatQRCode } from '../../services/wechatLogin';
import './WechatTest.css';

function WechatTest() {
  const [qrCodeUrl, setQrCodeUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const generateQR = async () => {
    setLoading(true);
    setError('');
    
    try {
      const url = await generateWechatQRCode();
      setQrCodeUrl(url);
      console.log('生成的微信授权URL:', url);
    } catch (err) {
      setError('生成二维码失败: ' + (err as Error).message);
      console.error('生成二维码失败:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="wechat-test">
      <div className="test-container">
        <h1>微信登录测试</h1>
        
        <div className="config-info">
          <h3>当前配置</h3>
          <p><strong>AppID:</strong> wxc0c160e79453964e</p>
          <p><strong>回调URL:</strong> {window.location.origin}/wechat-callback</p>
        </div>

        <div className="test-section">
          <button 
            className="generate-btn" 
            onClick={generateQR}
            disabled={loading}
          >
            {loading ? '生成中...' : '生成微信登录二维码'}
          </button>

          {error && (
            <div className="error-message">
              {error}
            </div>
          )}

          {qrCodeUrl && (
            <div className="qr-section">
              <h3>微信登录二维码</h3>
              <div className="qr-container">
                <QRCodeSVG value={qrCodeUrl} size={200} />
              </div>
              <p className="qr-tip">使用微信扫描此二维码进行登录测试</p>
              <div className="url-info">
                <p><strong>授权URL:</strong></p>
                <code className="auth-url">{qrCodeUrl}</code>
              </div>
            </div>
          )}
        </div>

        <div className="instructions">
          <h3>测试说明</h3>
          <ol>
            <li>点击"生成微信登录二维码"按钮</li>
            <li>使用微信扫描生成的二维码</li>
            <li>微信会跳转到回调页面</li>
            <li>观察登录状态变化</li>
          </ol>
        </div>
      </div>
    </div>
  );
}

export default WechatTest; 